<div id="app" v-cloak element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-header style="display: none;">
    </el-header>
    <el-container style="height: 100%; border: 1px solid #eee">
        <el-aside style="display:none;background-color: rgb(238, 241, 246)" :width="collapse?'unset':'200px'">
            <el-menu :default-openeds="menu.default_openeds" :default-active="request" :collapse="collapse"
                :unique-opened="true">
                <template v-for="i in menu.items">
                    <el-submenu v-if="i.hasOwnProperty('items')" :index="i.index">
                        <template slot="title">
                            <i :class="i.icon"></i>
                            <span>&nbsp;{{ i.title }}</span>
                        </template>
                        <template v-for="j in i.items">
                            <el-submenu v-if="j.hasOwnProperty('items')" :index="j.index">
                                <template slot="title">
                                    <i class="el-icon-arrow-right"></i>{{ j.title }}
                                </template>
                                <a v-for="k in j.items" :href="'#'+k.index">
                                    <el-menu-item :index="k.index">
                                        <i class="fa fa-circle" style="margin-top: 2.5px;"></i>
                                        <span>{{ k.title }}</span>
                                    </el-menu-item>
                                </a>
                            </el-submenu>
                            <a v-else :href="'#'+j.index">
                                <el-menu-item :index="j.index">
                                    <i class="el-icon-arrow-right"></i>{{ j.title }}
                                </el-menu-item>
                            </a>
                        </template>
                    </el-submenu>
                    <el-submenu v-else-if="collapse" :index="'a'+Math.random()">
                        <template slot="title">
                            <i :class="i.icon"></i>
                            <span>&nbsp;{{ i.title }}</span>
                        </template>
                        <a :href="'#'+i.index">
                            <el-menu-item :index="i.index">
                                <i class="el-icon-arrow-right"></i>{{ i.title }}
                            </el-menu-item>
                        </a>
                    </el-submenu>
                    <a v-else :href="'#'+i.index">
                        <el-menu-item :index="i.index">
                            <i :class="i.icon"></i>
                            <span>&nbsp;{{ i.title }}</span>
                        </el-menu-item>
                    </a>
                </template>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header style="height: unset;">
                <span style="font-size: 20px;">
                    <a href="./" style="color: black;">UTAU随机工程生成器</a>
                </span>
                <span style="font-size: 12px;">Version {{ version }}</span>
                <span style="font-size: 12px;float: right;">
                    <span>Code by</span>
                    <a href="https://gitee.com/suruoxian" target="_blank">苏若藓</a>
                    <span>/</span>
                    <a href="https://gitee.com/tetou" target="_blank">特投工作室</a>
                    <span>&nbsp;</span>
                    <el-button @click="tutorial = true">参考资料</el-button>
                    <el-dropdown style="display: none;">
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>查看</el-dropdown-item>
                            <el-dropdown-item>新增</el-dropdown-item>
                            <el-dropdown-item>删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </span>
            </el-header>

            <el-main v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
                <el-form ref="form" :model="form" label-width="90px">
                    <el-form-item label="声库名称">
                        <el-input v-model="form.voice" />
                    </el-form-item>
                    <el-form-item label="Tool1">
                        <el-input v-model="form.tool1" />
                    </el-form-item>
                    <el-form-item label="Tool2">
                        <el-input v-model="form.tool2" />
                    </el-form-item>
                    <el-form-item label="音高范围">
                        <el-slider v-model="form.range" :step="1" range :format-tooltip="formatRange" :max="107" :min="24" />
                    </el-form-item>
                    <el-form-item label="曲速">
                        <el-slider v-model="form.tempo" :step="0.5" show-input :max="200" :min="50" />
                    </el-form-item>
                    <el-form-item label="音符数量">
                        <el-slider v-model="form.number" show-input :max="9999" :min="10" />
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="oto=true">编辑音节表</el-button>
                        <el-button type="primary" @click="onSubmit">生成</el-button>
                    </el-form-item>
                </el-form>
                <el-footer>
                    <span
                        style="font-size: 12px;color: #909399;">免责声明：本工具产生的数据均为随机生成，不对使用这些数据产生的后果负责。</span>
                </el-footer>
            </el-main>
        </el-container>

        <el-dialog :visible.sync="tutorial" title="参考资料">
            <div style="font-size: 16px;">
                <p v-for="i in tutorials">
                    <a :href="i.href" target="_blank">
                        <i :class="i.icon"></i>
                        <span>{{ i.title }}</span>
                    </a>
                </p>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="oto" title="音节表（一行一个）" @close="onSaveOto">
            <div>
                <span>建议直接粘贴oto.ini内容。如oto.ini不存在或为空，可在音源文件夹执行以下cmd命令获取音节列表：</span>
                <span>dir *.wav /b</span>
                <el-input v-model="form.oto_content" type="textarea" :autosize="{ minRows: 10, maxRows: 10 }" />
                <br />
            </div>
        </el-dialog>
    </el-container>
</div>